<script setup>
import api from '@/api/index.js'
import HeaderSearch from '@/components/header-search/HeaderSearch.vue'
import category1 from '@/assets/images/index/category1.jpg'
import category2 from '@/assets/images/index/category2.jpg'
import category3 from '@/assets/images/index/category3.jpg'
import category4 from '@/assets/images/index/category4.jpg'
import category5 from '@/assets/images/index/category5.jpg'
import category6 from '@/assets/images/index/category6.jpg'
import category7 from '@/assets/images/index/category7.jpg'
import category8 from '@/assets/images/index/category8.jpg'
import category9 from '@/assets/images/index/category9.jpg'
import category10 from '@/assets/images/index/category10.jpg'
import pandaImage from '@/assets/images/index/panda.jpg'
import { useRouter } from "vue-router"
const fileUrl = import.meta.env.VITE_FILE_URL
import {defineEmits, defineProps, reactive, ref, watch} from 'vue'
const router = useRouter()

const emit = defineEmits(['changeCategory', 'changeCity'])
const props = defineProps({
  scenicActive: String,
  update: Number
})

const attractionTicketsCategoryList = [
  {
    imgUrl: 'category1',
    name: '名迹古胜'
  }, {
    imgUrl: category2,
    name: '自然风光'
  }, {
    imgUrl: category3,
    name: '展馆展览'
  }, {
    imgUrl: category4,
    name: '主题乐园'
  }, {
    imgUrl: category5,
    name: '玩水避暑'
  },
]

const hotelCategoryList = [
  {
    pictureId: '1700092405811908608',
    classifyName: '商旅专区'
  }, {
    pictureId: '1700092405811908608',
    classifyName: '车站周边'
  }, {
    pictureId: '1700092405811908608',
    classifyName: '品牌连锁'
  }, {
    pictureId: '1700092405811908608',
    classifyName: '网红民宿'
  }, {
    pictureId: '1700092405811908608',
    classifyName: '特价好房'
  },
]

const hotPotList = [
  {
    pictureId: '1700092405811908608',
    classifyName: '重庆火锅'
  }, {
    pictureId: '1700092405811908608',
    classifyName: '四川火锅'
  }, {
    pictureId: '1700092405811908608',
    classifyName: '自助火锅'
  }, {
    pictureId: '1700092405811908608',
    classifyName: '海鲜火锅'
  }
]

const SupermarketCategoryList = [
  {
    pictureId: category6,
    classifyName: '数码电器'
  }, {
    pictureId: category7,
    classifyName: '食品饮料'
  }, {
    pictureId: category8,
    classifyName: '食品饮料'
  }, {
    pictureId: category9,
    classifyName: '食品饮料'
  }, {
    pictureId: category10,
    classifyName: '食品饮料'
  },
]

watch(
    () => props.update,
    () => {
      getDetailImgInfo()
    }
);

const categoryList = reactive({
  attractionTickets: [],
  hotel: hotelCategoryList,
  hotPot: hotPotList
})

const bannerList = reactive({
  attractionTickets: [],
  hotel: [],
  hotPot: []
})
const loading = ref(false)
const _getBannerList = () => {
  loading.value = true
  api.getBannerList({
    kindId: 0
  }).then((res) => {
    bannerList.attractionTickets = res.data ?? []
  }).finally(() => {
    loading.value = false
  })
}
_getBannerList()

const chunkArray = (arr = [], chunkSize = 10) => {
  const result = []
  for (let i = 0; i < arr.length; i += chunkSize) {
    result.push(arr.slice(i, i + chunkSize));
  }
  return result
}


const changeCategoryClick = (key) => {
  // if (key === 'attractionTickets') {
  //   categoryList.value = attractionTicketsCategoryList
  // } else {
  //   categoryList.value = SupermarketCategoryList
  // }
  emit('changeCategory', key)
}
// 获取景点分类id
function goResultListClick(id){
    router.push({
      path: 'result/list',
      query: {
        classifyId: id,
        type: props.scenicActive
      }
    })
}


const getDetailImgInfo = () => {
  const params = {
    kindId: 0
  }
  api.getclassifymanage(params).then((res) => {
    categoryList.attractionTickets = res.data ?? []
  })
}
getDetailImgInfo()

const changeCity = () => {
  emit('changeCity')
}
const swipeClick = (item) => {
  if (item.kindId === '0') {
    // router.push(`/scenicspot/${item.merchantIdOrGoodsId}`)
  }
}
const pandaClick = () => {
  window.open('https://sj.qq.com/appdetail/com.cdwlhs.WLHscdApp?ocpc=0&supply_id=2700200113&account_id=45819001&plan_id=281385541&group_id=8046114948&keyword_id=570253924680&creative_id=71502645131&adposition=cl1&pagenum=1&matchtype=1&bd_vid=11439524976440146293&q=%E5%97%A8%E8%80%8D&use_previous_query=1')
}
</script>

<template>
  <div class="box">
    <div class="banner">
      <template v-if="!loading">
        <van-swipe class="my-swipe" :autoplay="4000" indicator-color="white" lazy-render>
          <van-swipe-item v-for="item in bannerList['attractionTickets']" :key="item.id">
            <van-image
              lazy-load
              width="100vw"
              height="25rem"
              :src="item.pictureUrl"
              @click="swipeClick(item)"
            />
              <!-- :src="`${fileUrl}/${item.pictureId}`" -->
          </van-swipe-item>
          <!-- <van-swipe-item v-if="!loading">
            <van-image
                lazy-load
                width="100vw"
                height="25rem"
                src="http://116.169.61.57:1007/2023-cdwl/6566ecfb2b5d4b506d0bd7bd.png"
            />
          </van-swipe-item>
          <van-swipe-item v-if="!loading">
            <van-image
                lazy-load
                width="100vw"
                height="25rem"
                src="http://116.169.61.57:1007/2023-cdwl/6566ecf5f80ff8067169e111.png"
            />
          </van-swipe-item>
          <van-swipe-item v-if="!loading">
            <van-image
                lazy-load
                width="100vw"
                height="25rem"
                :src="pandaImage"
                @click="pandaClick"
            />
          </van-swipe-item> -->
          <template #indicator="{ active, total }">
            <div class="custom-indicator">
              <div class="indicator" :class="{indicator_action: active + 1 === item}" v-for="item in total" :key="item"></div>
            </div>
          </template>
        </van-swipe>
      </template>
      <van-skeleton v-else>
        <template #template>
          <div :style="{ width: '100%' }">
            <van-skeleton-image :style="{ width: '100%', height: '25rem' }" />
          </div>
        </template>
      </van-skeleton>

      <div class="home">
        <HeaderSearch :goSearch="true" @changeCity="changeCity" :showPlaceholder="true" />
      </div>
      <!-- <div class="category1">
        <div @click="changeCategoryClick('attractionTickets')" :class="[props.scenicActive === 'attractionTickets' ? 'tab_active': '', 'tab']">
          <div v-show="props.scenicActive === 'attractionTickets'" class="line"></div>
          <span>景点门票</span>
          <div v-show="props.scenicActive === 'attractionTickets'" class="line line_borer"></div>
        </div>
        <img v-show="props.scenicActive === 'attractionTickets'" class="active_bg_left active_bg" src="@/assets/images/index/subtract1.png" alt="">

        <div @click="changeCategoryClick('hotel')" :class="[props.scenicActive === 'hotel' ? 'tab_active': '', 'tab']" >
          <div v-show="props.scenicActive === 'hotel'" class="line"></div>
          <span>酒店</span>
          <div v-show="props.scenicActive === 'hotel'" class="line line_borer"></div>
        </div>
        <img v-show="props.scenicActive === 'hotel'" class="active_bg_center active_bg" src="@/assets/images/index/subtract2.png" alt="">

        <div @click="changeCategoryClick('hotPot')" :class="[props.scenicActive === 'hotPot' ? 'tab_active': '', 'tab']" >
          <div v-show="props.scenicActive === 'hotPot'" class="line"></div>
          <span>活动</span>
          <div v-show="props.scenicActive === 'hotPot'" class="line line_borer"></div>
        </div>
        <img v-show="props.scenicActive === 'hotPot'" class="active_bg_right active_bg" src="@/assets/images/index/subtract3.png" alt="">
      </div> -->
    </div>

    <ul v-show="props.scenicActive === 'attractionTickets'" class="category">
      <van-swipe indicator-color="white">
        <van-swipe-item
          class="swipe_item"
          v-for="(item, index) in chunkArray(categoryList[props.scenicActive], 10)"
          :key="index"
          :loop="false"
        >
          <li class="list" v-for="(list, index) in item" :key="index" @click="goResultListClick(list.id)">
            <img class="img" fit="contain" :src="`${fileUrl}/${list?.pictureId}`" />
            <span>{{ list.classifyName }}</span>
          </li>
        </van-swipe-item>
      </van-swipe>
    </ul>
  </div>
</template>

<style scoped lang="scss">
:deep(.van-skeleton) {
  padding: 0;
}
.box {
  position: relative;

  .banner {
    position: relative;
    .custom-indicator {
      display: flex;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 18.7rem;

      .indicator{
        width: 1.5rem;
        height: .3rem;
        background: rgba(255,255,255,0.4);
        border-radius: .2rem;
        opacity: 1;
        margin: 0 .3rem;
      }
      .indicator_action{
        background-color: #FFFFFF;
      }
    }
    .header {
      position: absolute;
      top: 1.5rem;
      left: 1.5rem;
      right: 1.5rem;
    }

    .category1 {
      position: absolute;
      left: 1.5rem;
      right: 1.5rem;
      bottom: 0;
      display: flex;
      align-items: center;
      height: 5rem;
      z-index: 10;
      background-color: rgba(255, 255, 255, .3);
      backdrop-filter: blur(125px);
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;

      .tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        font-size: 1.6rem;
        color: #333333;
        text-align: center;

        .line {
          width: 3.1rem;
          height: .5rem;
          border-radius: .4rem;
        }

        .line_borer {
          background: linear-gradient(90deg, var(--van-primary-color) 0%, #FBEAA8 92%);
        }
      }

      .active_bg {
        position: absolute;
        top: 0;
        height: 5.2rem;
        z-index: -1;
      }

      .active_bg_left {
        left: 0;
      }
      .active_bg_center{
        left: 50%;
        transform: translate(-50%, 0);
      }

      .active_bg_right {
        right: 0;
      }
    }
  }

  .category {
    display: flex;
    align-items: center;
    width: calc(100vw - 3rem);
    margin: 0 1.5rem 0 1.5rem;
    background: linear-gradient(180deg, #FFFFFC 76%, rgba(255, 255, 252, 0) 100%);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    padding-bottom: 1.5rem;
    display: none;
    .swipe_item{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      .list {
        margin-top: 1.6rem;
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

   img{
      width: 4.4rem;
      height: 4.4rem;
      margin-bottom: 0.6rem;
    }

    span {
      margin-top: 0.6rem;
      font-size: 1.2rem;
    }
  }
}
</style>